<template>
  <vx-card title="子部门">
    <VuePerfectScrollbar class="scroll-area">
      <vx-table
        :data="parentData"
        :total="recordsTotal"
        :pageSize="pageSize"
        @current-change="currentChange"
        class="mt-4"
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="name" label="部门名称" sortable width="180"></el-table-column>
        <el-table-column label="状态" sortable width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">启动</span>
            <span v-else>停止</span>
          </template>
        </el-table-column>
        <el-table-column sortable label="类型" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type==1">根目录</span>
            <span v-if="scope.row.type==2">集团</span>
            <span v-if="scope.row.type==3">中心</span>
            <span v-if="scope.row.type==4">桥梁</span>
            <span v-if="scope.row.type==5">部门</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" sortable label="备注" width="100"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <feather-icon
              title="编辑"
              icon="EditIcon"
              :svgClasses="['stoke-current text-primary w-5 h-5']"
              class="cursor-pointer p-2"
              @click.stop="handleEdit(scope.$index, scope.row)"
            />
            <!-- <feather-icon
              title="停止"
              v-if="scope.row.status ==1"
              icon="SquareIcon"
              :svgClasses="['stoke-current text-success w-5 h-5']"
              class="cursor-pointer p-2"
              @click.stop="handleSwitch(scope.$index, scope.row)"
            />
            <feather-icon
              v-else
              title="启动"
              icon="SquareIcon"
              :svgClasses="['stoke-current text-warning w-5 h-5']"
              class="cursor-pointer p-2"
              @click.stop="handleSwitch(scope.$index, scope.row)"
            /> -->
            <feather-icon
              title="删除"
              icon="Trash2Icon"
              :svgClasses="['stoke-current text-danger w-5 h-5']"
              class="cursor-pointer p-2"
              @click.stop="handleDelete(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </vx-table>
    </VuePerfectScrollbar>

    <!--修改模态框开始 -->
    <vx-popup
      classContent="popup-example"
      title="编辑"
      :active.sync="popupActivo"
      @confirmPopup="confirmEdit"
      :isValid="!errorBags.any()"
      @cancelPopup="popupActivo =false "
    >
      <vs-input
        label="部门名称："
        class="inputx mt-2  red"
        v-model="editorData.name"
        name="部门名称"
        v-validate="'required'"
      />
      <span class="text-danger text-sm" v-show="errorBags.has('部门名称')">{{ errorBags.first('部门名称')}}</span>
      <vs-input label="code：" class="inputx mt-2  red" v-model="departmentCode" />
      <vs-select label="类型：" v-model="editorData.type" class="mt-2  red">
        <vs-select-item
          :key="index"
          :value="item.value"
          :text="item.text"
          v-for="(item,index) in departmentType"
        />
      </vs-select>
      <vs-input label="备注：" class="inputx mt-2" v-model="editorData.remark" />
    </vx-popup>
    <!-- 修改模态框结束 -->
    <!--删除模态框开始 -->
    <vx-popup
      classContent="popup-example"
      title="删除"
      :isValid="true"
      :active.sync="popupActivoDel"
      @confirmPopup="confirmDel"
      @cancelPopup="popupActivoDel = false"
    >
      <span>确定删除这条数据吗？</span>
    </vx-popup>
    <!-- 删除模态框结束 -->
  </vx-card>
</template>
<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";
export default {
  props: ["parentData", "recordsTotal","pageSize"],
  data() {
    return {
      popupActivo: false, //编辑模态框显隐
      popupActivoDel: false, //编辑模态框显隐
      departmentCode: "",
      departmentType: [],
      selectedNodeId: "",
      editorData: {
        name: "",
        remark: "",
        type: "",
        parentId: "",
        deptId: "",
        code: ""
      }
    };
  },
  methods: {
    //页码
    currentChange(currentPage) {
      this.$emit("filterUserGroup", currentPage * this.pageSize - this.pageSize);
    },
    //表格行编辑
    handleEdit(editorIndex, editorRow) {
      Object.keys(this.editorData).forEach(v => {
        this.editorData[v] = editorRow[v];
      });
      if (editorRow.type == 1 || editorRow.type == 2) {
        this.departmentType = [
          { text: "根目录", value: 1 },
          { text: "集团", value: 2 }
        ];
      } else if (editorRow.type == 3) {
        this.departmentType = [{ text: "中心", value: 3 }];
      } else if (editorRow.type == 4) {
        this.departmentType = [{ text: "桥梁", value: 4 }];
      } else {
        this.departmentType = [{ text: "部门", value: 5 }];
      }
      this.departmentCode = editorRow.code;
      this.popupActivo = true;
    },
    //表格行编辑-确认
    confirmEdit() {
      this.$api.accessControl
        .departmentEditor(this.editorData)
        .then(res => {
          this.popupActivo = false;
          if (res.data.success) {
            this.$vs.notify({ text: "保存成功", color: "success" });
            this.$emit("loadData", "", this.editorData.parentId);
          } else {
            if (res.data.message == "桥梁和部门不能相互改变") {
              this.$vs.notify({
                text: "桥梁和部门不能相互改变",
                color: "danger"
              });
            } else {
              this.$vs.notify({ text: "保存失败", color: "danger" });
            }
          }
        })
        .catch();
    },
    //表格行删除
    handleDelete(delIndex, delRow) {
      this.popupActivoDel = true;
      this.selectedNodeId = delRow.deptId;
      this.delPid = delRow.parentId;
    },
    confirmDel() {
      this.popupActivoDel = false;
      this.$api.accessControl
        .departmentDel(this.selectedNodeId)
        .then(res => {
          if (res.data.success) {
            this.$vs.notify({ text: "删除成功", color: "danger" });
            this.$emit("loadDataDel", this.delPid);
          } else {
            this.$vs.notify({ text: "删除失败", color: "danger" });
          }
        })
        .catch();
    },
    //表格行状态
    handleSwitch(index, row) {
      if (row.status == 1) {
        this.$api.accessControl
          .closeState({ deptId: row.deptId })
          .then(res => {
            if (res.data.success) {
              this.$emit("loadData", row.parentId);
              this.$vs.notify({ text: "停止成功", color: "success" });
            } else {
              this.$vs.notify({ text: "停止失败", color: "danger" });
            }
          })
          .catch();
      } else {
        this.$api.accessControl
          .startState({ deptId: row.deptId })
          .then(res => {
            if (res.data.success) {
              this.$emit("loadData", row.parentId);
              this.$vs.notify({ text: "启动成功", color: "success" });
            } else {
              this.$vs.notify({ text: "启动失败", color: "danger" });
            }
          })
          .catch();
      }
    }
  },
  components: {
    VuePerfectScrollbar
  }
};
</script>
<style lang="scss" scoped>
.scroll-area {
  height: calc(var(--vh, 1vh) * 100 - 23rem);
}

//弹窗
/deep/ .vs-popup {
  width: 400px;
  .con-select,
  .vs-input {
    width: 100%;
    margin: 0 auto;
  }
}
</style>
